<template>
  <div class="box" style="height:100%;">
    <div class="topIcon" @click="logout">
      <img src="../../assets/images/home/tuichu.png" />
    </div>
    <div class="tabsContainer">
      <el-tabs style="padding: 0rem 1.5rem 0rem;height:100%;">
        <el-tab-pane label="音视频"><Quality></Quality></el-tab-pane>
         <el-tab-pane label="实时语音"><RealtimeVoice></RealtimeVoice></el-tab-pane>
        <!-- <el-tab-pane label="配置管理">配置管理</el-tab-pane> -->
      </el-tabs>
    </div>
  </div>
</template>
  
  <script>
import { mapMutations } from "vuex";
import Quality from "./quality/index.vue";
import RealtimeVoice from './RealtimeVoice/index.vue'
export default {
  name: "callConfig",
  data() {
    return {};
  },
  components: {
    Quality,
    RealtimeVoice
  },
  mounted() {},
  methods: {
    ...mapMutations([
      "setcurrentUserId",
      "setUserInfoDetails",
      //  将this.setcurrentUserId 映射为 this.$store.commit("setcurrentUserId")
    ]),
    logout() {
      this.$router.push("/");
    },
  },
};
</script>
  
  <style scoped>
.topIcon,
.topIcon img {
  width: 3.5rem;
  height: 3.5rem;
  margin-right: 2rem;
  position: absolute;
  right: 0;
  top: 1rem;
  cursor: pointer;
  z-index: 1;
}
.tabsContainer {
  position: absolute;
  left: 2rem;
  top: 2rem;
  width: 90rem;
  height:90%;
}
.tabsContainer .el-tabs /deep/ .el-tabs__content {
  height:100%;
}
.tabsContainer .el-tabs /deep/ .el-tab-pane {
  height:100%;
}

.tabsContainer .el-tabs /deep/ .el-tabs__item {
  font-size: 1.1rem;
  font-weight: bold;
}
</style>
  